<template>
  <div class="password-toggle">
    <input :type="inputType" v-model="password" placeholder="请输入密码" />
    <button @click="togglePasswordVisibility">
      {{ buttonLabel }}
    </button>
  </div>
</template>

<script>
import { ref, computed } from "vue";

export default {
  setup() {
    // 定义响应式数据
    const password = ref("");
    const isPasswordVisible = ref(false);

    // 计算属性：动态切换输入框类型
    const inputType = computed(() =>
      isPasswordVisible.value ? "text" : "password"
    );

    // 计算属性：动态切换按钮文本
    const buttonLabel = computed(() =>
      isPasswordVisible.value ? "隐藏" : "显示"
    );

    // 方法：切换密码显示状态
    const togglePasswordVisibility = () => {
      isPasswordVisible.value = !isPasswordVisible.value;
    };

    // 返回数据和方法供模板使用
    return {
      password,
      isPasswordVisible,
      inputType,
      buttonLabel,
      togglePasswordVisibility,
    };
  },
};
</script>

<style scoped>
.password-toggle {
  display: flex;
  align-items: center;
}

input {
  margin-right: 10px;
  padding: 5px;
}

button {
  padding: 5px 10px;
  cursor: pointer;
}
</style>
